<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">

    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <form class="form-inline">
            <div class="form-group">
                <label class="sr-only"></label>
                <p class="form-control-static">请输入品牌名称</p>
            </div>
            <div class="form-group">
                <label for="inputPassword2" class="sr-only"></label>
                <input type="text" v-model="brandName" class="form-control" id="inputPassword2" placeholder="品牌名称">
            </div>
            <button class="btn btn-default" @click.prevent="add">添加</button>
        </form>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Brand Name</th>
                    <th>Create Time</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in brandsList" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td>
                        <button class="btn btn-danger" @click="del(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>

        //1. 创建vue对象
        var vm = new Vue({
            el: "#app",
            data: {
                brandName: "",
                brandsList: [
                    { id: 0, name: "布加迪", ctime: new Date() },
                    { id: 1, name: "比亚迪", ctime: new Date() },
                    { id: 2, name: "帕加尼", ctime: new Date() },
                    { id: 3, name: "迈巴赫", ctime: new Date() },
                    { id: 4, name: "迈凯伦", ctime: new Date() },
                ]
            },
            methods: {
                add: function () {
                    //1. 获取用户输入的内容
                    //在vue中获取页面中用户输入的内容： 数据绑定

                    //一定要记得，双向绑定就可以获取用户输入！！
                    // alert(this.brandName);

                    //2. 创建一个对象
                    var brand = {
                        id: this.brandsList.length > 0 ? this.brandsList[this.brandsList.length - 1].id + 1 : 0,
                        name: this.brandName,
                        ctime: new Date()
                    }
                    //3. 将对象添加到brandsList中即可
                    this.brandsList.push(brand);
                    this.brandName = "";
                },
                del: function(id){
                    
                    //删除当前行对应的数据
                    //1. 需要知道当前行数据的id
                    // id被当做参数传进来了

                    //2. 根据id去数组里删掉对应的数据
                    //2.1 找id对应的数据
                    var brand = this.brandsList.find(function(v){
                        return v.id == id;
                    })
                    //2.2 找数据对应的索引
                    var index = this.brandsList.indexOf(brand);

                    //2.3 根据索引删除
                    this.brandsList.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>